<template>
  <div class="navigation">
    <div class="navigationCon">
      <div
        :class="[
          selectedMenu === item.route
            ? 'navigationItem selectedIcon'
            : 'navigationItem unSelectedIcon'
        ]"
        v-for="item in menuList"
        @click="selectMenu(item.route)"
        :key="item.route"
      >
        <span class="icon iconfont">{{ item.icon }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MainFooter",
  data: function() {
    return {
      menuList: [
        {
          icon: "\ue6f3",
          route: "/main/follow"
        },
        {
          icon: "\ue62a",
          route: "/main/recommend"
        },
        {
          icon: "\ue606",
          route: "/main/search"
        },
        {
          icon: "\ue605",
          route: "/main/book"
        },
        {
          icon: "\ue607",
          route: "/main/account"
        }
      ],
      selectedMenu: "/main/follow"
    };
  },
  methods: {
    selectMenu: function(route) {
      this.selectedMenu = route;
      this.$router.push(route);
    }
  }
};
</script>

<style lang="stylus" scoped>
.navigation
	width 100%
	border-top 1px solid #F4F6F9
	.navigationCon
		display flex
		align-self center
		justify-content space-around
		.navigationItem
			width 100%
			text-align center
			padding:12px

.selectedIcon
	color #0085FF
.unSelectedIcon
	color #9EABB8
</style>
